<template>
	<view style="position: relative;col">
		<view class="col" style="padding: 40rpx;">
			<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
				<u-form-item label="收款日期" prop="inDate" :labelWidth="labelWidth" labelPosition="left"
					:borderBottom="true" required>
					<view class="row-between-center" style="width: 100%;" @click.stop="showTime = true; ">
						<input style=" pointer-events: none;" :focus="false" v-model="info.inDate" 
							disabledColor="#ffffff" placeholder="请选择" border="none" placeholder-style="place"></input>
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>

				</u-form-item>
				<u-form-item label="收款金额" prop="inPrice" :labelWidth="labelWidth" labelPosition="left"
					:borderBottom="true" required>
					<view class="row-between-center" style="width: 100%;">
						<input placeholder="请输入" v-model="info.inPrice" placeholder-class="place" />
						<view class="">元</view>
					</view>
				</u-form-item>
				<u-form-item label="收款凭证截图" prop="inPics" :labelWidth="labelWidth" labelPosition="top"
					:borderBottom="true" required>
					<u-upload style="margin-top: 24rpx;" :fileList="info.inPics" @delete="deletePic" deletable name="5"
						multiple :maxCount="3"></u-upload>
				</u-form-item>
				<u-form-item label="备注" prop="remark" :labelWidth="labelWidth" labelPosition="top">
					<u--textarea v-model="info.remark" placeholder="请输入内容" count border="bottom"
						:maxlength="500"></u--textarea>
				</u-form-item>
			</u--form>
		</view>

		<view class="bottom row-center">
			<view class="btn row-center" @click="submit">
				保存并发送给采购商确认
			</view>
		</view>

		<u-datetime-picker @confirm="confirmTime" @cancel="closeTime" :show="showTime" v-model="time"
			mode="date"></u-datetime-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth: 120,
				showTime: false,
				time:'',
				info: {
					inDate:'',
					inPrice:'',
					inPics:[],
					remark:''
				},
				rules: {
					'inPics': {
						type: 'array',
						min: 1,
						required: true,
						message: '请上传收款凭证',
						trigger: ['blur', 'change']
					},
					'inDate': {
						type: 'string',
						required: true,
						message: '请选择收款日期',
						trigger: ['blur', 'change']
					},
					'inPrice': {
						type: 'string',
						required: true,
						message: '请输入收款金额',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
		 TimestampToDate2(Timestamp) {
		　　let now = new Date(Timestamp),
		　　y = now.getFullYear(),
		　　m = now.getMonth() + 1,
		　　d = now.getDate();
		　　return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
		},

			confirmTime(e) {
				console.log('confirmTime',e)
				this.info.inDate =this.TimestampToDate2(e.value)
				this.showTime = false
				this.$forceUpdate()
			},
			closeTime() {
				this.showTime = false
				this.$forceUpdate()
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			deletePic() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.bottom {
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 120rpx;
		background-color: white;

		.btn {
			height: 80rpx;
			margin: 0 36rpx;
			width: calc(100% - 72rpx);
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}
	}

	.place {
		color: #C9CCD5;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx;
		/* 157.143% */
	}

	.text {
		color: #17161B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx;
		/* 157.143% */
	}
</style>